<template>
  <div>
    <!-- 标题 -->
    <child-nav-bar title="学习成果类别" beforePath="/staging"></child-nav-bar>

    <!-- 类别列表 -->
    <van-swipe-cell v-for="item in cateList" :key="item.type_id">
      <van-cell border :title="item.type_name" />
      <template #right>
        <van-button square type="danger" @click="deleteType(item)" text="删除" />
      </template>
    </van-swipe-cell>
    <!-- 添加按钮 -->
    <van-goods-action>
      <van-goods-action-button type="danger" color="#1baeae" text="添加类别" @click="addButton"/>
    </van-goods-action>

    <!-- 弹框 -->
    <van-popup v-model="typeShow" position="bottom" :style="{ height: '30%' }" >
      <van-form @submit="onSubmit">
        <van-field v-model="ruleForm.type_name" label="类别" placeholder="请输入类别名称"/>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit" color="#1baeae">提交</van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import {deleteById, findTypeAdd, findTypeAll} from "@/api/achievement_typeAPI";
import {Notify} from "vant";

export default {
  name: "index",
  data(){
    return{
      cateList: [],
      typeShow:false,
      // 表单
      ruleForm:{
        type_name:'' // 类别名称
      }
    }
  },
  created() {
    this.getCategoryList();
  },
  methods:{
    /**
     * 获取类别列表
     * */
    async getCategoryList(){
      let params = {
        pageNum: 1,
        pageSize: 20,
      }
      // 获取类别列表
      let res = await findTypeAll(params);
      this.cateList = res.data.list
    },
    /**
     * 删除类别事件
     * */
    deleteType(item){
      deleteById(item.type_id).then(res=>{
        this.getCategoryList();
        // 提示信息
        Notify({ type: 'success', message: res.message});
      })
    },
    /**
     * 添加类别按钮
     * */
    addButton(){
      this.typeShow = true
    },
    /**
     * 发送添加请求
     * */
    onSubmit(){
      // 新增类别
      findTypeAdd(this.ruleForm).then((res) => {
        if (res.code === 200) {
          this.typeShow = false;
          this.getCategoryList();
          this.ruleForm.type_name = '';
        }
      });
    }
  }
}
</script>

<style scoped lang="scss">

</style>
